/**
 * Created by Administrator on 2017/10/10.
 */
import React from "react";
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import {Icon,Tabs,Flex,Grid,WhiteSpace,Carousel} from "antd-mobile";
import WitCarousel from '../../components/WitCarousel/index.jsx';
const TabPane = Tabs.TabPane;
import styles from './study.less';

import  study1 from '../../assets/study/study1.png'
import  study2 from '../../assets/study/study2.png'
import  study3 from '../../assets/study/study3.png'

import banner from './img/banner.png';
import banner1 from '../../assets/infor/banner.jpg';

const PlaceHolder = props => (
  <div
    style={{
      color: props.flag ? '#FFFFFF':'#757575',
      textAlign: 'center',
      backgroundColor:props.flag ? '#ff0000':'#FFFFFF',
      height: '0.5rem',
      lineHeight: '0.5rem',
      margin:'0.05rem 0.3rem',
      padding:'0rem 0.1rem',
      fontSize:'0.3rem',
      borderRadius:'0.05rem'
    }}
    {...props}
  >{props.label}</div>
);

class index extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      classify:'1-1',
      screen:'2-1',
      data: [{img:study1,text:'两学一做'}, {img:study2,text:'党史精粹'},{img:study3,text:'法律法规'}],
      carouselNumber: 1,
      initialCarouselHeight: '0rem',
    };
  }

  callback = (key) =>{
    console.log('callback', key);
  };

  handleTabClick = (key) =>{
    console.log('callback', key);
    if(key === '3'){
      this.props.dispatch(
        routerRedux.push({
          pathname: `/study/interlocution`
        })
      );
    }
  };
  classifyClick =(str) =>{
    this.setState({
      classify:str
    })
  };
  screenClick=(str) =>{
    this.setState({
      screen:str
    })
  };
  onClick =(item,index)=>{
    this.props.dispatch(
      routerRedux.push({
        pathname: `/study/course`
      })
    );
  };
  onExClick = () =>{
    this.props.dispatch(
      routerRedux.push({
        pathname: `/study/examination`
      })
    );
  };
  menuClick = (el) =>{
    this.props.dispatch(
      routerRedux.push({
        pathname: `/study/courseList`
      })
    );
  };
  handleTrend = () => {
    // this.props.dispatch(
    //   routerRedux.push({
    //     pathname: `/infor/trendDetail`,
    //     query: {}
    //   })
    // );
  };
  render(){
    const data = [1,2,3,4,5,6,7,8,9,10];
    const type = [
      {text:'两学一做',color:'#ff0000',Icon:<Icon size="lg" type={require('../../svgs/Study/lxyz.svg')} />},
      {text:'理论学习',color:'#6AAFF4',Icon:<Icon size="lg" type={require('../../svgs/Study/llxx.svg')} />},
      {text:'党建经验',color:'#91DADE',Icon:<Icon size="lg" type={require('../../svgs/Study/djjy.svg')} />},
      {text:'党史精粹',color:'#F9D57D',Icon:<Icon size="lg" type={require('../../svgs/Study/dsjc.svg')} />},
      {text:'党员必备',color:'#eb4161',Icon:<Icon size="lg" type={require('../../svgs/Study/dybb.svg')} />},
      {text:'法律法规',color:'#aba0a0 ',Icon:<Icon size="lg" type={require('../../svgs/Study/flfg.svg')} />},];

    return(
      <div className="study">
        {/*<WitCarousel />*/}
        {/*跑马灯*/}
        <div style={{height: `${this.state.initialCarouselHeight}`, backgroundColor: '#fff' }}>
          <Carousel
            className={styles.myCarousel}
            autoplay={false}
            infinite={true}
            selectedIndex={0}
            swipeSpeed={35}
            dots={false}
            afterChange={index => {this.setState({carouselNumber: index+1})}}>
            {this.state.data.map((ii,index) => (
              <a onClick={this.handleTrend} key={index} className={styles.myCarouselA}>
                <img
                  className={styles.myCarouselAImg}
                  src={ii.img}
                  alt="icon"
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({
                      initialCarouselHeight: '4rem'
                    });
                  }}
                />
                <Flex justify='between' align='center' className={styles.myCarouselAShadow}>
                  <div style={{marginLeft: '0.2rem',fontSize: '0.26rem'}}>{ii.text}</div>
                  <div style={{marginRight: '0.2rem',fontSize: '0.2rem'}}>
                    <span style={{fontSize: '0.38rem'}}>{this.state.carouselNumber}</span>
                    /3
                  </div>

                </Flex>
              </a>
            ))}
          </Carousel>
        </div>
        <Tabs defaultActiveKey="1" swipeable={false}  onChange={this.callback} onTabClick={this.handleTabClick}>
          <TabPane tab={<div>在线学习</div>} key="1">
            {/*<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
              Content of First Tab
            </div>*/}
            <Grid
              data={type}
              columnNum={3}
              hasLine={false}
              onClick={el => this.menuClick(el)}
              renderItem={dataItem => {
                return(
                  <div className="am-grid-item-contain column-num-4" style={{textAlign:'center'}}>
                    <div style={{ backgroundColor:`${dataItem.color}`, width:'1rem', height:'1rem', display: 'inline-flex', justifyContent: 'center', alignItems: 'center', borderRadius:'60%'}}>
                      {
                        dataItem.Icon
                      }
                    </div>
                    <div className="am-grid-text" style={{fontSize:'0.28rem',marginTop:'0.2rem'}}>{dataItem.text}</div>
                  </div>
                )}}
            />
          </TabPane>
          <TabPane tab={<div>在线考试</div>} key="2">
            <Grid
              data={data}
              columnNum={2}
              hasLine={false}
              onClick={this.onExClick}
              renderItem={dataItem => {
                let src ;
                switch (dataItem %4)
                {
                  case 0:
                    src = study3;
                    break;
                  case 1:
                    src = study3;
                    break;
                  case 2:
                    src = study2;
                    break;
                  case 3:
                    src = study1;
                    break;
                }
                return(
                  <div style={{}}>
                    <div style={{ width: '100%'}} >
                      <img src={src} style={{ width: '100%'}} />
                    </div>
                    <div style={{ textAlign:'left',marginTop:'0.2rem'}}>10问教你读懂两学一做</div>
                    <div style={{ textAlign:'left',marginTop:'0.2rem',color:'#C0C0C0'}}>2333次学习</div>
                  </div>
                )}}/>
          </TabPane>
          <TabPane tab={<div>在线问答</div>} key="3">
          </TabPane>
        </Tabs>
        <WhiteSpace style={{height: '1.3rem'}}/>
      </div>

    )
  }
}

function mapStateToProps({personCenter, personLayout}){
  return {personCenter, personLayout};
}
export default connect(mapStateToProps)(index);
